<template>
  <div class="model-container">
    <div class="listName">分类Banner</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">广告名称</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="advertName">
                    <el-input v-model="seacherParam.advertName" size="small" placeholder="请输入广告名称"/>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :xl="5" :lg="6" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">类型</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="">
                    <el-select v-model="seacherParam.type" size="small" placeholder="请选择类型">
                      <el-option :value="0" label="首页"/>
                      <!--<el-option :value="2" label="分类页"/>-->
                      <!--<el-option :value="3" label="热销"/>-->
                      <el-option :value="4" label="积分"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <el-button type="danger" plain @click="del(0)">批量删除</el-button>
        </div>
      </div>
      <el-tabs v-model="activeName" style="padding: 0 25px" @tab-click="handleTabClick">
        <el-tab-pane label="首页" name="one"/>
        <!--<el-tab-pane label="类品首页" name="tow"></el-tab-pane>-->
        <!--<el-tab-pane label="分类页" name="three"/>-->
        <!--<el-tab-pane label="热销" name="four"/>-->
        <el-tab-pane label="积分" name="five"/>
      </el-tabs>

      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据"
                  @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" prop="pictureName" label="广告名称"/>

          <el-table-column v-if="activeName === 'three'" align="center" prop="catName" label="分类名称"/>

          <el-table-column align="center" label="广告图片">
            <template slot-scope="scope">
<!--              <img :src="scope.row.advertPicUrl" width="50px" height="50px">-->
<!--              <img :src="scope.row.advertPicUrl" width="50px" height="50px">-->
              <img :src="'/static/images/'+scope.row.pictureUrl" width="50px" height="50px">
<!--              <img :src="'/static/images/'+scope.row.advertPicUrl" width="50px" height="50px">-->
            </template>
          </el-table-column>

          <el-table-column align="center" label="轮播图方式">
            <template slot-scope="scope">{{ scope.row.pictureType === 0 ? '外部链接' : '小程序' }}</template>
          </el-table-column>

          <el-table-column align="center" label="广告类型">
            <template slot-scope="scope">{{ scope.row.advertType === 0 ? '首页' : '积分' }}</template>
          </el-table-column>

          <el-table-column align="center" label="可用状态">
            <template slot-scope="scope">{{ scope.row.isAvailable === 0 ? '不可用' : '可用' }}</template>
          </el-table-column>

          <el-table-column align="center" label="审核状态">
            <template slot-scope="scope">{{ censorStatusVal(scope.row.censorStatus) }}</template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon"
                         @click="edit(scope.row)"/>

              <el-button title="删除" type="warning" circle icon="el-icon-delete" class="table-icon"
                         @click="del(scope.row)"/>

              <el-button v-if="scope.row.censorStatus === 0" title="审核" type="primary" circle class="table-icon"
                         @click="audit(scope.row)"><i class="iconfont icon-feiji"/></el-button>

            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon
               class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="广告名称" prop="advertName">
            <el-input v-model="dialogBindData.advertName" size="small" type="text" placeholder="请输入广告名称"/>
          </el-form-item>
          <el-form-item label="图片" prop="advertPicUrl" class="three">

            <upLoadImg v-if="isRouterAlive" :dialog-type="dialogType" :img-logo-url="dialogBindData.advertPicUrl"
                       @emitSuccess="successImgFun"/>

          </el-form-item>
          <el-form-item label="排序" prop="ranking">
            <el-input v-model="dialogBindData.ranking" size="small" type="text"/>
          </el-form-item>
          <el-form-item label="广告总类型" prop="type" class="three">
            <el-radio-group v-model="dialogBindData.type">
              <el-radio :label="0">首页</el-radio>
              <!--<el-radio :label="1">类品首页</el-radio>-->
              <el-radio :label="2">分类页</el-radio>
              <el-radio :label="3">热销</el-radio>
              <el-radio :label="4">积分</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="dialogBindData.type === 2" label="分类页" prop="parentId" class="three">
            <el-input v-model="filterText" size="small" type="text" placeholder="过滤搜索"/>
            <el-tree
              v-if="isRouterAlive"
              ref="tree"
              :data="threeData"
              :filter-node-method="filterNode"
              :default-checked-keys="threeCheckedData"
              :default-expanded-keys="threeCheckedData"
              :props="defaultProps"
              show-checkbox
              node-key="catId"
              highlight-current
              check-strictly
              @check-change="handleClick"
              @node-click="nodeClick"/>
          </el-form-item>
          <el-form-item label="跳转类型" prop="linkType">
            <el-radio-group v-model="dialogBindData.linkType">
              <el-radio :label="0">外部链接</el-radio>
              <el-radio :label="1">内容</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="dialogBindData.linkType === 0" label="跳转链接url" prop="linkUrl">
            <el-input v-model="dialogBindData.linkUrl" autosize size="small" type="text" placeholder="请输入url地址"/>
          </el-form-item>
          <el-form-item v-if="dialogBindData.linkType === 1" label="内容" prop="text">
            <el-input v-model="dialogBindData.text" autosize size="small" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="可用状态" prop="isAvailable">
            <el-radio-group v-model="dialogBindData.isAvailable">
              <el-radio :label="0">不可用</el-radio>
              <el-radio :label="1">可用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as banner from '../../api/banner'
import * as commodity from '../../api/commodity'
import upLoadImg from '../../components/UpLoadImg_b2b2c'

export default {
  components: {upLoadImg},
  data() {
    return {
      isRouterAlive: true,
      // tab
      activeName: 'one',
      // 页面搜索
      seacherParam: {
        advertName: '',
        type: 0
      },
      searchShow: false,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 弹框
      dialogType: 1, // 1--增加  2--编辑  3--查看
      dialogState: false,
      // 按钮状态
      buttonState: false,
      // 列表数据
      dataOption: null,
      datavalID: [],
      // 提交内容
      dialogBindData: {
        advertId: null,
        advertName: '',
        advertPicUrl: '',
        ranking: '',
        type: 0,
        typeId: '',
        linkType: 0,
        linkUrl: '',
        text: '',
        isAvailable: 1,
      },

      rules: {
        advertName: [
          {required: true, message: '请输入广告名称', trigger: 'blur'}
        ]
      },
      // Three树
      filterText: '',
      i: 0,
      threeData: null,
      threeCheckedData: [],
      defaultProps: {
        children: 'children',
        label: 'catName'
      }
    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogType === 1) {
        return '新增Banner'
      }
      if (this.dialogType === 2) {
        return '编辑Banner'
      } else {
        return '查看'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  beforeMount() {
    this.getList(0)
  },
  methods: {
    seachFun() {
      const param = {
        current: 1,
        size: this.pageSize,
        advertName: this.seacherParam.advertName,
        type: this.seacherParam.type
      }
      banner.searchBannerclassList(param).then(res => {
        if (this.seacherParam.type === 0) {
          this.activeName = 'one'
        } else if (this.seacherParam.type === 1) {
          this.activeName = 'tow'
        } else if (this.seacherParam.type === 2) {
          this.activeName = 'three'
        } else if (this.seacherParam.type === 3) {
          this.activeName = 'four'
        } else if (this.seacherParam.type === 4) {
          this.activeName = 'five'
        }
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    getList(type) {
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        type: type
      }
      banner.getBannerclassList(param).then(res => {
        console.log(res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }

        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // tab点击
    handleTabClick() {
      this.dataOption = null
      if (this.activeName === 'one') {
        this.getList(0)
      } else if (this.activeName === 'tow') {
        this.getList(1)
      } else if (this.activeName === 'three') {
        this.getList(2)
      } else if (this.activeName === 'four') {
        this.getList(3)
      } else if (this.activeName === 'five') {
        this.getList(4)
      }
    },
    // 新增
    add() {
      this.dialogType = 1
      this.dialogState = true
      this.isRouterAlive = true
      this.threeList()
    },
    // 编辑
    edit(data) {
      this.dialogType = 2
      this.dialogState = true
      this.isRouterAlive = true
      this.dialogBindData.advertId = data.advertId
      if (data.typeId !== null) {
        this.threeCheckedData.push(data.typeId)
      }
      this.reBindData(data)
      this.threeList()
    },
    // 提交
    submmitFun() {
      const param = {
        advertName: this.dialogBindData.advertName,
        advertPicUrl: this.dialogBindData.advertPicUrl,
        ranking: this.dialogBindData.ranking,
        type: this.dialogBindData.type,
        linkType: this.dialogBindData.linkType,
        isAvailable: this.dialogBindData.isAvailable
      }
      if (this.dialogBindData.linkType === 0) {
        param.linkUrl = this.dialogBindData.linkUrl
      } else if (this.dialogBindData.linkType === 1) {
        param.text = this.dialogBindData.text
      }
      if (this.dialogBindData.type === 2) {
        const threeID = this.$refs.tree.getCheckedKeys()
        param.typeId = threeID[0]
      }
      if (this.dialogType !== 1) {
        param.advertId = this.dialogBindData.advertId
      }
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogBindData.advertPicUrl === '') {
            this.$message({
              message: '请选择图片',
              type: 'warning'
            })
            return false
          }
          if (this.dialogType === 1) {
            banner.addBannerclassList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.buttonState = false
              if (this.dialogBindData.type === 0) {
                this.activeName = 'one'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 1) {
                this.activeName = 'tow'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 2) {
                this.activeName = 'three'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 3) {
                this.activeName = 'four'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 4) {
                this.activeName = 'five'
                this.getList(this.dialogBindData.type)
              }
              this.handleClose()
            })
          } else {
            banner.editorBannerclassList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.buttonState = false
              if (this.dialogBindData.type === 0) {
                this.activeName = 'one'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 1) {
                this.activeName = 'tow'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 2) {
                this.activeName = 'three'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 3) {
                this.activeName = 'four'
                this.getList(this.dialogBindData.type)
              } else if (this.dialogBindData.type === 4) {
                this.activeName = 'five'
                this.getList(this.dialogBindData.type)
              }
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })
    },
    // 删除
    del(data) {
      if (this.datavalID.length === 0 && data === 0) {
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据'
        })
        return false
      }
      this.$confirm('确定要删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delList(data);
      })
    },
    delList(data) {

      // const classID = []
      // if (data === 0) {
      //   for (const val of this.datavalID) {
      //     classID.push(val.advertId)
      //   }
      // } else {
      //   classID.push(data.pictureId);
      // }
      const param = {
        pictureId: data.pictureId
      }

      banner.delBannerclassList(param).then(res => {
        if (res.data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          if (res.data.code === 0) {
            this.activeNameFun()
            //this.$message.error('删除失败！');
          } else {
            this.getList(data.type)
          }
        }
      })
    },
    changeFun(data) {
      this.datavalID = data
    },
    // 审核
    audit(data) {
      this.$confirm('审核是否通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.censorStatusFun(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    censorStatusFun(data) {
      const param = {
        pictureId: data.pictureId,
        pictureUrl:data.pictureUrl
      }
      banner.editorBannerclassList(param).then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getList(data.type)
        }
      })
    },
    // 上传图片
    successImgFun(data) {
      this.dialogBindData.advertPicUrl = data
    },
    // 反显
    reBindData(data) {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.pageNo = 1
      this.pageSize = 10
      this.getList(0)
    },
    // three树
    threeList() {
      const param = {
        current: 1,
        size: 3000
      }
      commodity.getCategoryList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始化three树
        this.threeData = res.data.data.records
      })
    },
    // 过滤搜索
    filterNode(value, data) {
      if (!value) return true
      return data.catName.indexOf(value) !== -1
    },
    // three单选
    handleClick(data, checked, node) {
      if (checked === true) {
        this.checkedId = data.catId
        this.$refs.tree.setCheckedNodes([data])
      }
    },
    nodeClick(data, checked, node) {
      this.checkedId = data.catId
      this.$refs.tree.setCheckedNodes([data])
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.activeNameFun()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.activeNameFun()
    },

    activeNameFun() {
      if (this.activeName === 'one') {
        this.getList(0)
      } else if (this.activeName === 'tow') {
        this.getList(1)
      } else if (this.activeName === 'three') {
        this.getList(2)
      } else if (this.activeName === 'four') {
        this.getList(3)
      } else if (this.activeName === 'five') {
        this.getList(4)
      }
    },

    handleClose() {
      for (const key in this.dialogBindData) {
        if (key === 'type') {
          this.dialogBindData[key] = 0
        } else if (key === 'linkType') {
          this.dialogBindData[key] = 0
        } else if (key === 'isAvailable') {
          this.dialogBindData[key] = 1
        } else {
          this.dialogBindData[key] = ''
        }
      }
      this.threeCheckedData = []
      this.dialogState = false
      this.isRouterAlive = false
      this.$refs.dialogBindData.clearValidate()
    },
    // 审核状态
    censorStatusVal(type) {
      if (type === 0) {
        return '未审核'
      } else if (type === 1) {
        return '已审核'
      }else if (type === 2) {
        return '审核成功'
      }else if (type === 3) {
        return '未通过'
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>

</style>
